<template>
  <div>
    <van-button type="default" @click="downClick">下钻</van-button>
    <!-- 选择下钻的选项，根据选中的选项弹出对应的框 -->
    <van-action-sheet v-model="actionShow" :round="false" :actions="treedata" @close="onClose" @select="onSelect" />
    <!-- 弹出抽屉，展示组件 -->
    <van-popup
      v-model="downShow"
      position="right"
      closeable
      custom-style="height: 20%, width:100%"
      close-icon="cross"
      class="popupContent"
    >
      <!-- 自调用组件 -->
      <div v-for="item in treedata" :key="item.id">
        <runInSon v-if="item.children && item.children.length > 0" :treedata="item.children" :key="item.id"></runInSon>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  props: ['treedata'],
  name: 'RunInSon',
  data() {
    return {
      actionShow: false,
      downShow: false
    }
  },
  mounted() {},
  methods: {
    onClose() {
      // 关闭弹窗
      this.actionShow = false
    },
    // 选中弹窗选项，弹出抽屉
    onSelect(event) {
      event.children ? (this.downShow = true) : this.$toast('这个选项已经下钻到底了呦~')
    },
    // 打开弹窗
    downClick() {
      this.actionShow = true
    }
  }
}
</script>

<style lang="scss" scoped></style>
